<template>
  <div class="layout">
    <Layout>
      <Header >
        <Menu mode="horizontal" theme="dark" active-name="1">
          <div class="layout-logo">
            微红包
          </div>
          <div class="layout-nav">
            <!--<MenuItem name="1">-->
              <!--<Icon type="ios-navigate"></Icon>-->
              <!--API-->
            <!--</MenuItem>-->
            <!--<MenuItem name="2">-->
              <!--<Icon type="ios-keypad"></Icon>-->
              <!--交易市场-->
            <!--</MenuItem>-->
            <!--<MenuItem name="3">-->
              <!--<Icon type="ios-analytics"></Icon>-->
              <!--股 市-->
            <!--</MenuItem>-->
            <MenuItem name="4" :to="{path: '/Bosslogin'}">
              <Icon type="ios-paper"></Icon>
              退出
            </MenuItem>
          </div>
        </Menu>
      </Header>

      <Layout>
        <Sider hide-trigger :style="{background: '#fff',height:allheight+'px'}">
          <Menu :theme="theme3" active-name="1" theme="light" width="auto" accordion>
            <MenuGroup title="会员管理">
              <MenuItem name="1" :to="{path: '/Member'}">
                <Icon type="md-person" />
                我的会员
              </MenuItem>
            </MenuGroup>
            <!--<MenuGroup title="扫码记录">-->
              <!--&lt;!&ndash;<MenuItem name="2" :to="{path: '/qrcode'}">&ndash;&gt;-->
                <!--&lt;!&ndash;<Icon type="md-heart"/>&ndash;&gt;-->
                <!--&lt;!&ndash;创建红包&ndash;&gt;-->
              <!--&lt;!&ndash;</MenuItem>&ndash;&gt;-->
              <!--&lt;!&ndash;<MenuItem name="2" :to="{path: '/AllRedRecord'}">&ndash;&gt;-->
                <!--&lt;!&ndash;<Icon type="md-heart" />&ndash;&gt;-->
                <!--&lt;!&ndash;扫码记录&ndash;&gt;-->
              <!--&lt;!&ndash;</MenuItem>&ndash;&gt;-->
            <!--</MenuGroup>-->
          </Menu>
        </Sider>
        <router-view></router-view>

      </Layout>
    </Layout>
  </div>
</template>
<script>
  export default {
    props: {},
    components: {},
    data() {
      return {
        theme3: 'light',
        allheight:'',
        ContentBodyHeight:'',
      }
    },
    methods: {},
    watch: {},
    computed: {
      //计算属性
    },
    created() {

      document.body.style.background = '#fcfcfc';
      this.allheight = window.screen.availHeight - 168;
      this.ContentBodyHeight = window.screen.availHeight - 272;
      this.$h.ContentBodyHeight(this.ContentBodyHeight)
    },
    mounted() {
      //生命周期
    }
  }
</script>
<style scoped>
  .layout{
    border: 1px solid #d7dde4;
    background: #f5f7f9;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    width:100%;
    height:100%;
  }
  .layout-logo{
    width: 120px;
    height: 50px;
    color: white;
    float: left;
    /*font-weight: bold;*/
    font-size: 16px;
  }
  /*.layout-logo img{*/
    /*display: block;*/
    /*width: 100%;*/
    /*height: 100%;*/
    /*background-size: 100% 100%;*/

  /*}*/
  .layout-nav{
    width: 450px;
    margin: 0 auto;
    margin-right: 20px;
  }
</style>
